<template>
	<view class="content-box">
		<view class="header">
			<view style="height: 88upx;"></view>
			<view @click="$go('newhome/city')" class="dinwei mb-20">
				<image src="../../static/dwt.png" class="dw"></image>
				<view style="color: #fff;margin-left:8upx;float: left;">{{city}}</view>
				<image src="../../static/dwx.png" class="dwa"></image>
			</view>
			<view class="tabbar">
				<view v-for="(item,index) in cate" @click="choose_cate(index,0)"
					:class="[index==curo?'tabbar_li':'tabbar_lia',index==0?'tabbar_lib':'']">{{item.name}}</view>
			</view>

			<view class="shuruxinxi">
				<view class="weihuoc">
					<view v-if="cate.length>0" class="weihuoxinxi">
						<view v-if="cate[curo].child!=undefined" v-for="(item,index) in cate[curo].child"
							@click="choose_cate(index,1)" :class="index==curt?'weihuo':'weihuob'">{{item.title}}
							<view class="line-box"></view>
						</view>
					</view>
					<view v-if="cate.length>0" class="weihuoxinxi">
						<block v-if="cate[curo].child.length>0">
							<view v-if="cate[curo].child[curt]!=undefined" @click="choose_cate(index,2)"
								v-for="(item,index) in cate[curo].child[curt].child"
								:class="index==currentCar?'weihuo':'weihuoa'">{{item.length}}米
								<view class="line-box"></view>
							</view>
						</block>
					</view>
					<!-- <view class="weihuoxinxi">
					 
						<image src="../../static/xzx.png" class="dw"></image>
					</view> -->
					<view class="zhuangxie shadow">
						<view class="dinwx">
							<view class="z">装</view>
							<view class="shuru">
								<view v-if="receiveAddress.mapAddress"
									@click="choose_path('newaddress/address/editbook?is_save=1')"
									style="line-height:24upx;" class="shurk">
									<view class="pt-24 fz26">{{receiveAddress.mapAddress}}</view>
									<view class="pt-18 fz26">{{receiveAddress.userPhone}}</view>
								</view>
								<view v-else @click="choose_path('newaddress/address/editbook?is_save=1')"
									class="shurk">从哪里装货 ?
								</view>

								<view @click="$go('newaddress/book?is_user=1')" class="dizpu">地址簿</view>
							</view>
						</view>
						<block v-if="n>0">
							<view v-if="index==0" v-for="(item,index) in deliveAddress" class="dinwx">
								<view class="x">卸</view>
								<view class="shuru">
									<view @click="choose_path('newaddress/address/editbook?is_save=1&idx='+index)"
										style="line-height:24upx;" class="shurk">
										<view class="pt-24 fz26">{{item.mapAddress}}</view>
										<view class="pt-18 fz26">{{item.userPhone}}</view>
									</view>

									<view @click="$go('newaddress/book?is_user=1&type=1&idx='+index)" class="dizpu">地址簿
									</view>
								</view>
							</view>
						</block>
						<view v-else class="dinwx">
							<view class="x">卸</view>
							<view class="shuru">

								<view @click="choose_path('newaddress/address/editbook?is_save=1&type=1')"
									class="shurk">从哪儿卸货 ?
								</view>
								<view @click="$go('newaddress/book?is_user=1&type=1&idx=0')" class="dizpu">地址簿</view>
							</view>
						</view>
						<view class="dzcylx">
							<image src="../../static/group_822.png"
								style="width: 24upx; height: 24upx;float: left; margin-top: 13upx;margin-left: 10upx;">
							</image>
							<view @click="$go('newaddress/path?is_use=1')"
								style="line-height: 52upx;font-size: 26upx;margin-left: 10upx;float: left;">常用路线
							</view>
						</view>
					</view>
					<view class="zhuangxiea shadow">
						<view @click="price_type=0" class="relative" :class="price_type==0?'dinwxaa':'dinwxaac'">
							<image v-if="price_type==0" src="../../static/check-one.png" class="imsl"></image>
							<image v-else src="../../static/ellipse_16.png" class="imsl"></image>
							<view class="ykhg">一口价</view>
							<view class="jgfy">
								<input class="inp" v-model="money"><view class="unit-text">元</view>
								<!-- {{money}} -->
							</view>
						</view>
						<view @click="price_type=1" :class="price_type==1?'dinwxaa':'dinwxaac'">
							<image v-if="price_type==1" src="../../static/check-one.png" class="imsl"></image>
							<image v-else src="../../static/ellipse_16.png" class="imsl"></image>
							<view class="ykhg">电话议价</view>

						</view>
						<view style="height:24upx;width:100%;clear:both;"></view>
						<view v-if="money>0" class="anyfh">
							<view @click="show_func" class="yongxhe">现在用车</view>
							<!-- 保证金弹窗 -->
							<view @click="show_time=true" class="yuyue">预约</view>
						</view>
						<view v-else class="anyfh">
							<view @click="show_func" class="yongxhe">现在用车</view>
							<!-- 保证金弹窗  show=false;-->
							<view @click="show_time=true" class="yuyue">预约</view>
						</view>
						<u-modal title="" :width="info.mode==4?'640upx':'480upx'" :show="show"
							:closeOnClickOverlay="false" :showConfirmButton="false" :showCancelButton="false">
							<my-model @com="show=false;getNeworderConfirm()" :info="info"
								@close="show=false"></my-model>
						</u-modal>
					</view>
				</view>
			</view>

		</view>
		<st-tabbar :tabbar="tabbar"></st-tabbar>
		<u-datetime-picker :show="show_time" @cancel="show_time=false" @confirm="appo_date" v-model="book_time"
			mode="datetime"></u-datetime-picker>
		<!-- <u-modal title="" width="480upx" :show="show_model" :closeOnClickOverlay="false" :showConfirmButton="false"
			:showCancelButton="false">
			<my-model style="width:100%;" :info="info" @close="show_model=false"></my-model>
		</u-modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_time: false,
				book_time: "",
				tabbar: {
					current: 0
				},
				show_model: false,
				show: false,
				info: {
					//icon:"error",
					icon: "error",
					title: "资料提交成功",
					content: "预计15个工作日内审核完毕，在此期间 您仍可以正常使用",
					bnt: ["我知道了"],
					mode: 1
					//1.审核 2.抢单成功 3.缴纳技术服务费 4.缴纳技术保证金
				},
				cate: [],
				price_type: 0,
				pram_str: "",
				n: 0,
				money: 0,
				receiveAddress: {},
				deliveAddress: [],
				curo: 0,
				curt: 0,
				currentCar: 0,
				city: ""
			}
		},
		/*watch: {
			receiveAddress: function(e) {
				this.CalculatePrice()
			},
			deliveAddress: function(e) {
				this.CalculatePrice()
			}
		},*/
		onShow() {
			this.receiveAddress = this.$store.getters.receiveAddress;
			this.deliveAddress = this.$store.getters.deliveAddress;
			var n = 0;
			for (var i in this.deliveAddress) {
				n++;
			}
			this.n = n;
			this.$forceUpdate();
			this.$api["get"]("base/vehicle-cate", {}).then(res => {
				if (res.code == 200) {
					this.cate = res.data;
					this.CalculatePrice();
				}
			});
			if (this.$store.getters.setCity.name) {
				this.city = this.$store.getters.setCity.name;
			}
			//console.log(this.deliveAddress,"====deliveAddress==");
		},

		onLoad(e) {
			if (e.pram) {
				this.pram_str = e.pram;
				this.pram = JSON.parse(e.pram);
			}
			var i = this;

			if (this.$store.getters.setCity.name) {
				//return;
			}
			uni.getLocation({
				type: "gcj02",
				isHighAccuracy: !0,
				success: function(e) {
					//console.log(e, "===e====");
					i.$api["post"]("common/tencent-map/analysis", {
						lat: e.latitude,
						lng: e.longitude
					}).then((function(e) {
						if (e.code == 200) {
							var r = {
								name: e.data.address_component.city,
								lng: e.data.location.lng,
								lat: e.data.location.lat
							};
							i.city = r.name;
							i.$store.commit("setCity", r)
						}

					}))
				}
			})

		},
		methods: {
			choose_path(url) {
				this.$store.commit("setDelive", {});
				this.$go(url);
			},
			show_func() {
				var content =
					"<div style='text-align:left'>缴纳<span style='color:#0083fe'>2000元</span>，缴纳之日起，365天(含)内 包含发货<span style='color:#0083fe'>3000</span>次数，根据达标的数量到期后 按照规则返还缴纳技术保证金</div>";
				this.info = {
					icon: "error",
					title: "缴纳技术保证金",
					content: content,
					bnt: ["确定"],
					mode: 4,
					is_html: 1,
					is_com: 1,
					colse_icon: 1
				}
				this.show = true;
			},
			appo_date(e) {
				var appointment_date = this.$toDateTime(e.value);
				this.show_time = false;
				this.$store.commit("appoTime", appointment_date);
				this.getNeworderConfirm();
			},
			getNeworderConfirm() {
				var token = uni.getStorageSync('LOGIN_TOKEN_KEY');
				if (token == "") {
					this.$go('login/index');
					return;
				}
				if (!this.receiveAddress.mapAddress) {
					this.$toast({
						title: "选择装货地址"
					});
					return;
				}
				if (this.deliveAddress[0] == undefined) {
					this.$toast({
						title: "选择卸货地址"
					});
					return;
				}
				this.$store.commit("setPriceType", this.price_type);
				this.$store.commit("setCarInfo", this.cate[this.curo].child[this.curt].child[this.currentCar]);
				this.$go('neworder/confirm');
			},
			choose_cate(index, type) {
				if (type == 0) {
					this.curo = index;
					this.curt = 0;
					this.currentCar = 0;
				} else if (type == 1) {
					this.curt = index;
					this.currentCar = 0;
				} else {
					this.currentCar = index;
				}
				//this.CalculatePrice();
			},
			CalculatePrice() {
				if (this.cate[this.curo].child[this.curt].child[this.currentCar] == undefined) {
					return;
				}
				if (this.deliveAddress[0] && this.receiveAddress.mapAddress) {
					var i = {
						receive: this.deliveAddress,
						delive: this.receiveAddress
					}
					var markers = 0;
					for (var h in this.deliveAddress) {
						markers++;
					}
					this.$api["post"]("common/baidu-map/detail", {
						address: JSON.stringify(i)
					}).then(i => {
						if (i.code == 200) {
							var cat_veh = this.cate[this.curo].child[this.curt].child[this.currentCar];
							var n = {
								distance: i.data.distance,
								vehicle_id: cat_veh.id,
								markers: markers
							};
							this.$api["post"]("base/money/cost", n).then(e => {
								if (e.code == 200) {
									this.money = e.data.price;
									//setCarCost
									this.$store.commit("setCarPrice", e.data.price);
									this.$store.commit("setCarCost", e.data);
								}

							});

						}
					});
				}

			}
		}
	}
</script>
<style>
	page {
		padding-bottom: 200rpx;
		/* overflow: hidden; */
	}
</style>
<style scoped lang="scss">
	.header {
		width: 100%;
		height: 300upx;
		background: #0194fd;
	}

	.dinwei {
		width: 90%;
		height: 50upx;
		float: left;
		margin-left: 5%;

		.dwa {
			width: 28upx;
			height: 20upx;
			float: left;
			margin-left: 12upx;
			margin-top: 10upx;
		}
	}

	.dw {
		width: 32upx;
		height: 32upx;
		float: left;
	}

	.tabbar {
		width: 90%;
		height: 80upx;
		float: left;
		margin-left: 5%;
	}

	.tabbar_li {
		// width: 80upx;
		// height: 50upx;
		padding: 10upx 32upx;
		background: #fff;
		color: #0194fd;
		border-radius: 100upx;
		text-align: center;
		// line-height: 50upx;
		font-size: 28upx;
		float: left;
		margin-left: 30upx;
	}

	.tabbar_lia {
		// width: 80upx;
		// height: 50upx;
		padding: 10upx 32upx;
		float: left;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		// line-height: 50upx;
		font-size: 28upx;
		margin-left: 30upx;
	}

	.tabbar_lib {
		margin-left: 0upx !important;
	}

	.shuruxinxi {
		width: 100%;
		// height: 80vh;
		float: left;
		background: #eee;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding-bottom: 180rpx;
	}

	.weihuoc {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
	}

	.weihuoxinxi {
		width: 100%;
		// height: 60upx;
		float: left;
		margin-top: 25upx;
	}

	.weihuo {
		// width: 80upx;
		height: 100%;
		//border-bottom: 4upx solid #0194fd;
		text-align: center;
		font-weight: 600;
		float: left;
		margin-left: 15upx;
		font-size: 32upx;
		color: #333333;

		.line-box {
			width: 60%;
			height: 4upx;
			background: #0194fd;
			margin: 12upx auto;
		}
	}

	.weihuob {
		// width: 80upx;
		height: 100%;
		text-align: center;
		float: left;
		font-size: 32upx;
		margin-left: 15upx;
	}

	.weihuoa {
		// width: 80upx;
		height: 100%;
		text-align: center;
		float: left;
		margin-left: 15upx;
		color: #aaa;
	}

	.zhuangxie {
		width: 100%;
		padding-bottom: 24upx;
		float: left;
		background: #fff;
		margin-top: 40upx;
		border-radius: 16upx;
	}

	.zhuangxiea {
		width: 100%;
		padding-bottom: 24upx;
		float: left;
		background: #fff;
		margin-top: 40upx;
		border-radius: 16upx;
	}

	.dinwx {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;
	}

	.z {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 42upx;
		background: #0194fd;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
		font-size: 24upx;
	}

	.x {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 42upx;
		background: #FF902A;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
		font-size: 24upx;
	}

	.shuru {
		width: 90%;
		height: 122upx;
		background: #F8F8F8;
		border-radius: 16upx;
		float: left;
		margin-left: 16upx;
	}

	.shurk {
		width: 70%;
		height: 100%;
		line-height: 122upx;
		float: left;
		margin-left: 16upx;
		color: #777;
	}

	.dizpu {
		width: 25%;
		height: 40upx;
		line-height: 40upx;
		float: right;
		border-left: 1upx solid #ccc;
		margin-top: 40upx;
		text-align: right;
		color: #777777;
		padding-right: 24upx;
		font-size: 28upx;
	}

	.dzcylx {
		width: 176upx;
		height: 52upx;
		float: left;
		background: #F6F6F6;
		border-radius: 5upx;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.dinwxaa {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;
		background: rgba(1, 149, 253, 0.05);
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 1upx solid #0195FD;
	}

	.dinwxaac {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;

		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;

	}

	.imsl {
		width: 32upx;
		height: 32upx;
		float: left;
		margin-top: 46upx;
		margin-left: 25upx;
	}

	.ykhg {
		width: 150upx;
		height: 100%;
		float: left;
		margin-left: 20upx;
		line-height: 122upx;
		text-align: center;
	}

	.jgfy {
		width: 150upx;
		height: 100%;
		float: right;
		margin-right: 20upx;
		line-height: 122upx;
		text-align: center;
		position: relative;
		.inp {
			width: 120upx;
			position: absolute;
			height: 32upx;
			line-height: 32upx;
			top: 40upx;
			text-align: right;
		}
		.unit-text{
			position:absolute;
			right:0upx;
		}
	}

	.anyfh {
		width: 90%;
		height: 92upx;
		float: left;
		margin-left: 5%;

	}

	.yongxhe {
		width: 70%;
		height: 100%;
		float: left;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		background: #0194fd;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}

	.yuyue {
		width: 30%;
		height: 100%;
		float: left;
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		background: #FF902A;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}
</style>